<script lang="ts" setup>
import { ref } from 'vue'

const showKf = ref(false)
function callPhoneNumber(tel: string) {
  uni.makePhoneCall({
    phoneNumber: tel,
  })
}
function goKf() {
  uni.openCustomerServiceChat({
    extInfo: { url: 'https://work.weixin.qq.com/kfid/kfcfe7a062150a71302' },
    corpId: 'ww2e9130a3e162e73d',
    success(res) {
      console.log(res)
    },
  })
}
</script>

<template>
  <!-- 客服功能 start -->
  <view class="boot-kf" @click="showKf = true">
    <view class="logo" />
    <view>客服</view>
  </view>
  <wd-popup v-model="showKf" closable custom-style="border-radius:32rpx;width:80%;">
    <view class="kf-box">
      <view class="title">
        投诉建议 / 疑问解答
      </view>
      <view class="pb-10rpx">
        投诉热线：<text class="text-[#07c160] font-bold" @click="callPhoneNumber('18812345678')">
          188 1234 5678
        </text>( 设备商家 )
      </view>
      <view>
        平台客服：<text class="text-[#07c160] font-bold" @click="callPhoneNumber('19128923056')">
          191 2892 3056
        </text>( 联系平台 )
      </view>
      <!-- #ifdef MP-WEIXIN -->
      <view class="kf-option flex-align-center flex py-30rpx">
        <button
          class="kf-btn"
          open-type="contact"
          @click="goKf"
        >
          联系客服
        </button>
        <wd-img :width="20" :height="20" src="https://pay.yuntbq.com/static/img/wechat.png" />
        <text class="pl-1 text-[#1989FA] font-bold">
          平台在线客服
        </text>
      </view>
      <!-- #endif -->
      <!-- #ifdef H5 -->
      <a class="flex-align-center flex py-30rpx" href="https://work.weixin.qq.com/kfid/kfcfe7a062150a71302">
        <wd-img :width="20" :height="20" src="https://pay.yuntbq.com/static/img/wechat.png" />
        <text class="pl-1 text-[#1989FA] font-bold">
          平台在线客服
        </text>
      </a>
      <!-- #endif -->
      <view class="text-[#f30303]">
        如在消费中遇到问题，如：支付后不上币、少币等, 请及时联系商家处理, 如商家未及时处理或处理不满意可联系平台客服协助您解决;
      </view>
    </view>
  </wd-popup>
  <!-- 客服功能 end -->
</template>

<style lang="scss" scoped>
.boot-kf {
    position: fixed;
    top: 16%;
    right: 0;
    padding: 0;
    margin: 0;
    z-index: 9999;
    width: 34px;
    background: #2a90ff linear-gradient(138deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.08);
    border-radius: 10px 0 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 12px;
    color: #fff;
    line-height: 16px;
    text-align: center;
    padding-top: 2px;
    padding-bottom: 4px;
    cursor: pointer;
    .logo {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      display: inline-block;
      background: url('https://pay.yuntbq.com/static/img/client_2.png') 8px 3px no-repeat #fff;
      background-size: 18px auto;
      margin-bottom: 3px;
      animation: pulse 1s infinite;
    }
    @keyframes pulse {
      0% {
      transform: scale(1);
        opacity: 1;
      }
      50% {
      transform: scale(1.1);
        opacity: 1;
      }
      100% {
      transform: scale(1);
        opacity: 1;
      }
    }
}
.kf-box{
  font-size: 28rpx;
  padding: 60rpx 45rpx;
  background-color: #ffffff;
  .title {
    font-size: 30rpx;
    font-weight: bold;
    text-align: center;
    padding-bottom: 30rpx;
  }
  .kf-option{
    position: relative;
    .kf-btn{
      position: absolute;
      left: 0;
      height: 48rpx;
      width: 210rpx;
      z-index: 999;
      opacity: 0;
    }
  }
}
</style>
